<template>
  <div class="app-container">
    <div class="box ph-30">
      <div class="panel">
        <div class="panel-header">
          <h3 class="panel-title">费用明细</h3>
        </div>
        <div class="panel-body">
          <el-row>
            <el-col :span="24">
              <el-collapse v-model="activeCollapse">
                <el-collapse-item name="1" v-if="trainList.length > 0">
                  <template #title>
                    <div class="titlebar">
                      培训科目费
                      <div class="fr">
                        合计:<span class="money"
                          >{{
                            trainData?.projectCost * 1 +
                            trainData?.examCost * 1
                          }}元</span
                        >
                      </div>
                    </div>
                  </template>
                  <div>
                    <el-table border :data="trainList" style="width: 100%">
                      <el-table-column type="index" label="序号" width="50" />
                      <el-table-column label="科目类型" prop="type" />
                      <el-table-column label="科目名称" prop="projectName" />
                      <el-table-column label="必报科目" prop="is" />
                      <el-table-column label="科目费用" prop="cost" />
                    </el-table>
                  </div>
                </el-collapse-item>
                <el-collapse-item name="2" v-if="hotList.length > 0">
                  <template #title>
                    <div class="titlebar">
                      食宿费
                      <div class="fr">
                        合计:<span class="money"
                          >{{ trainData?.accommodationCost }}元</span
                        >
                      </div>
                    </div>
                  </template>
                  <div>
                    <el-table border :data="hotList" style="width: 100%">
                      <el-table-column type="index" label="序号" width="50" />
                      <el-table-column label="酒店名称" prop="name" />
                      <el-table-column label="酒店地址" prop="address" />
                      <el-table-column label="房型" prop="houseType" />
                      <el-table-column
                        label="入住时间"
                        prop="moveIntoTimeStr"
                      />
                      <el-table-column label="费用" prop="cost" />
                    </el-table>
                  </div>
                </el-collapse-item>
                <el-collapse-item
                  name="3"
                  v-if="trainData?.otherList?.length > 0"
                >
                  <template #title>
                    <div class="titlebar">
                      其他费用
                      <div class="fr">
                        合计:<span class="money"
                          >{{ trainData?.otherCost }}元</span
                        >
                      </div>
                    </div>
                  </template>
                  <div>
                    <el-table
                      border
                      :data="trainData?.otherList"
                      style="width: 40%"
                    >
                      <el-table-column type="index" label="序号" width="50" />
                      <el-table-column label="费用类型" prop="name" />
                      <el-table-column label="费用" prop="spend" />
                    </el-table>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <el-divider />

              <div v-if="status != 0 && status != 1">
                <h3>支付方式</h3>
                <el-radio-group v-model="payType">
                  <el-radio
                    v-if="myBalance * 1 > 0"
                    label="2"
                    size="large"
                    border
                    ><img src="@/assets/img/zf02.png" style="width: 30px" />
                    <span class="paySpan">
                      会员卡支付<span
                        >(余额 <i class="orange">¥{{ myBalance }}</i
                        >)</span
                      >
                    </span>
                  </el-radio>
                  <el-radio label="0" size="large" border
                    ><img src="@/assets/img/zf_wx.png" />微信</el-radio
                  >
                  <el-radio label="1" size="large" border
                    ><img src="@/assets/img/zf_xj.png" />线下支付</el-radio
                  >
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="panel-footer text-center" v-if="status != 0 && status != 1">
          <span class="paySpan"
            >培训科目费用：<span
              >{{
                (trainData?.projectCost * 1 + trainData?.examCost * 1).toFixed(
                  2
                )
              }}元</span
            >
            食宿费用：<span
              >{{ (trainData?.accommodationCost * 1).toFixed(2) }}元</span
            >
            其他费用：<span>{{ (trainData?.otherCost * 1).toFixed(2) }}元</span>
            合计：<i>￥{{ (trainData?.totalCost * 1).toFixed(2) }}</i></span
          >
          <el-button type="success" round @click="submitForm()"
            >提交订单</el-button
          >
        </div>
      </div>
    </div>
    <el-dialog v-model="success" :close-on-click-modal="false">
      <el-result icon="success" title="支付成功" />
      <template #extra>
        <el-button type="primary" @click="goMyMatch">查看订单详情</el-button>
      </template>
    </el-dialog>
    <el-dialog
      v-model="bankShow"
      title=" 线下支付"
      width="400px"
      @close="goMyMatch"
    >
      <ul class="orgbox">
        <li>单位：{{ bank.accountName }}</li>
        <li>开户行：{{ bank.accountBank }}</li>
        <li>账户：{{ bank.accountNum }}</li>
        <li>
          打款金额：<span class="orange"
            >¥{{ (trainData?.totalCost * 1).toFixed(2) }}</span
          >
        </li>
      </ul>
      <template #footer>
        <div class="dialog-footer text-center">
          <el-button type="primary" @click="goMyMatch">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="successV" @close="goMyMatch">
      <el-result icon="success" title="支付成功" />
    </el-dialog>
    <we-pay ref="wePayRef" @close="goMyMatch" />
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getCurrentInstance, onMounted } from "@vue/runtime-core";
import { useRouter, useRoute } from "vue-router";
import * as train from "@/api/train/pc.js";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const trainData = ref();
const trainList = ref([]);
const orderId = ref();
const myBalance = ref();
const bankShow = ref(false);
const bank = ref();
const payShow = ref(false);
const lock = ref(true);
const successV = ref(false);
const status = ref(null);
const hotList = ref([]);
const data = reactive({
  activeCollapse: ["1", "2", "3"],
  payType: "1",
});
const { activeCollapse, payType } = toRefs(data);

onMounted(() => {
  initData();
  balance();
  getInit();
});

async function getInit() {
  let res = await train.getTrainDetails({ id: route.query.id });
  status.value = res.data.signStatus;
  // 012已支付
  console.log(status.value);
}

async function initData() {
  let res = await train.signFees({
    trainId: route.query.id,
    venueId: route.query.venueId,
  });
  trainData.value = res.data;
  res.data.trainVoList.forEach((item) => {
    item.type = "培训";
    item.isNecessary == 1 ? (item.is = "是") : (item.is = "否");
    trainList.value.push(item);
  });
  res.data.examVoList.forEach((item) => {
    item.type = "考试";
    item.isNecessary == 1 ? (item.is = "是") : (item.is = "否");
    trainList.value.push(item);
  });
  res.data?.accommodationVoList?.forEach((item) => {
    item.trainHotelList.forEach((val) => {
      val.address = item.address;
      val.houseType = item.houseType;
      hotList.value.push(val);
    });
  });
}

// 会员余额
async function balance() {
  let res = await train.balance({ trainId: route.query.id });
  myBalance.value = res.data.balance;
  console.log(myBalance.value);
}

// 生成订单
function saveOrder() {
  return new Promise(async (resolve, reject) => {
    let res = await train.saveOrder({
      venueId: route.query.venueId,
      trainId: route.query.id,
    });
    if (res.code == 200) {
      orderId.value = res.data;
      return resolve("成功");
    } else {
      return reject("失败");
    }
  });
}

// 订单支付
function pay() {
  return new Promise(async (resolve, reject) => {
    let res = await train.pay({ id: orderId.value, flag: payType.value });
    console.log(res);
    if (res.code == 200) {
      payShow.value = true;
      lock.value = true;
      if (payType.value == 2) successV.value = true;
      if (payType.value == 0) return proxy.$refs["wePayRef"].open(res.data);
      return resolve("成功");
    } else {
      return reject("失败");
    }
  });
}

// 获取银行账户信息
function bankInfo() {
  return new Promise(async (resolve, reject) => {
    let res = await train.bankInfo({ id: orderId.value });
    bank.value = res.data;
    if (res.code == 200) {
      bankShow.value = true;
      return resolve();
    } else {
      return reject();
    }
  });
}

// 提交订单按钮
async function submitForm() {
  if (payShow.value) return; //支付成功
  if (lock.value) {
    lock.value = false;
    if (payType.value == null) return proxy.$modal.msgError("请选择支付方式！");
    if (!orderId.value) await saveOrder();
    await pay();
    if (payType.value == 1) await bankInfo();
    lock.value = true;
  }
}

// 微信支付取消
function goMyMatch() {
  successV.value = false;
  bankShow.value = false;
  router.push({
    name: "myTrain",
  });
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 0;
  background: #f5f7f9;
}
.panel-footer {
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 50px;
}
.panel-footer .el-button--success {
  background: linear-gradient(270deg, #39dba7, #38ef7d);
  border: none;
  padding: 0 40px;
  font-size: 16px;
}
.panel-footer .el-button--success.is-plain {
  background: #fff;
  border: 1px solid #2ed981;
  color: #2ed981;
}
.el-collapse {
  --el-collapse-border-color: transparent;
}
.el-collapse-item {
  margin: 0 0 30px;
  padding: 0 20px;
  border-radius: 10px;
  background: #fbfcfd;
  --el-collapse-border-color: transparent;
  --el-collapse-header-bg-color: transparent;
  --el-collapse-content-bg-color: transparent;
}
.titlebar {
  width: 100%;
  font-size: 18px;
  .fr {
    .num {
      color: #7b7f83;
      margin-right: 20px;
    }
    .money {
      color: #ff8124;
      margin: 0 6px;
    }
  }
}
:deep(.el-radio.el-radio--large .el-radio__label) {
  display: flex;
  img {
    margin-right: 6px;
  }
}
:deep(.el-radio.is-bordered.el-radio--large .el-radio__inner) {
  width: 25px;
  height: 25px;
}
:deep(.el-radio__inner::after) {
  width: 7px;
  height: 7px;
}
.paySpan {
  margin-top: 6px;
}
.orange {
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
}
.paySpan {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #95a1a6;
}
.paySpan > span {
  color: #000;
  margin-right: 20px;
}
.paySpan > i {
  font-size: 22px;
  font-family: DIN Alternate;
  font-weight: bold;
  color: #eb6100;
}
</style>
